@extends('admin.layout.layout', ['row' => @$page])

@section('contain')
    <link rel="stylesheet" href="/dist/element-ui.css">
    <style>
        .el-table-column--selection .el-checkbox__inner{
            width: 22px;
            height: 22px;
        }
        .el-table-column--selection .el-checkbox__inner::after {
            width: 6px;
            height: 14px;
            left: 6px;
        }
        .el-table-column--selection .el-checkbox__input.is-indeterminate .el-checkbox__inner::before{
            top: 9px;
        }
    </style>
    <div class="portlet">
        <div class="portlet-title">
            <div class="caption">
                <x-portlet-breadcrumb :page="$page"></x-portlet-breadcrumb>
            </div>
            <div class="actions">
                @if(session('admin.user_type')==1)
                    <div class="item">
                        <a href="/{{ request()->path() }}/create" class="btn btn-primary">{{ ts('addnew') }}</a>
                    </div>
                @endif
            </div>
        </div>

        <div class="filter-wrapper d-none">
            <form action="/{{ request()->path() }}/" class="form-inline filter-form">
                <div class=" input-group mb-3 custom-control-inline">
                    <input type="text" class="form-control s-input" name="value" value="{{ request()->input('value') }}" placeholder="{{ ts('DISTRIBUTORSEARCHTEXT') }}">
                </div>
                <div class="input-group mb-3 custom-control-inline">
                    <select name="status" class="form-control">
                        <option value="">{{ ts('select').' '.ts('status') }}</option>
                        <option value="1" {{ request()->input('status') == 1 ? 'selected' : '' }}>{{ ts('active') }}</option>
                        <option value="2" {{ request()->input('status') == 2 ? 'selected' : '' }}>{{ ts('deactive') }}</option>
                    </select>
                </div>

                <div class="mb-3">
                    <button class="btn btn-primary">{{ ts('SEARCH') }}</button>
                    <a href="/{{ request()->path() }}/" class="btn btn-warning">{{ ts('RESET') }}</a>
                </div>

            </form>
        </div>
        <div id="vueRoot" class="d-none">
            <div class="filter-wrapper">
                <div class="form-inline filter-form">
                    <div class=" input-group mb-3 custom-control-inline">
                        <el-input class="s-input" v-model="Form.value" placeholder="{{ ts('DISTRIBUTORSEARCHTEXT') }}"></el-input>
                    </div>
                    <div class="input-group mb-3 custom-control-inline">
                        <el-select v-model="Form.status" placeholder="{{ ts('status') }}" clearable>
                            <el-option label="{{ ts('active') }}" value="1" >{{ ts('active') }}</el-option>
                            <el-option label="{{ ts('deactive') }}" value="0">{{ ts('deactive') }}</el-option>
                        </el-select>
                    </div>

                    <div class="mb-3">
                        <button class="btn btn-primary" @click="doSearch()">{{ ts('SEARCH') }}</button>
                        <a href="/{{ request()->path() }}/" class="btn btn-warning">{{ ts('RESET') }}</a>
                    </div>
                </div>
            </div>
            <el-table :data="List" height="600px" border style="width: 100%" v-loading="loading" ref="multipleTable">
                <el-table-column type="selection" width="60" label="{{ ts('SELECT') }}"></el-table-column>
                {{--<el-table-column type="index" :index="indexMethod" label="{{ ts('sequence') }}" width="90px"></el-table-column>--}}
                <el-table-column prop="id" label="{{ ts('DISTRIBUTORID') }}" width="120px"></el-table-column>
                <el-table-column prop="abbr" label="{{ ts('sdqy') }}"></el-table-column>
                <el-table-column prop="company_name" label="{{ ts('COMPANYNAME') }}"></el-table-column>
                <el-table-column prop="first_name" label="{{ ts('CONTACTPERSON') }}"></el-table-column>
                <el-table-column prop="phone_number" label="{{ ts('CONTACTINFORMATION') }}"></el-table-column>
                <el-table-column prop="status_txt" label="{{ ts('STATUS') }}"></el-table-column>
                <el-table-column prop="date" label="{{ ts('OPERATIONS') }}" width="280px">
                    <template slot-scope="{ row }">
                        <a class="btn btn-success btn-sm" :href="viewUrl(row.id)">{{ ts('VIEW') }}</a>

                        <span class="btn btn-danger btn-sm" @click="editDistributorStatus(row.id, row.status)" v-text="uESta(row.status)"></span>

                        <a v-if="row.ddn" class="btn btn-success btn-sm" :href="ddnUrl(row.id)">{{ ts('dealer') }}</a>
                        <span v-else class="btn btn-dark btn-sm disabled">{{ ts('dealer') }}</span>

                        <a v-if="row.ddpn" class="btn btn-primary btn-sm" :href="ddpnUrl(row.id)">{{ ts('performance') }}</a>
                        <span v-else class="btn btn-dark btn-sm disabled">{{ ts('performance') }}</span>

                        <button type="button" class="btn btn-danger btn-sm" onclick="handleDelete2('row.status ')">{{ ts('delete') }}</button>
                    </template>
                </el-table-column>
            </el-table>
            <div class="row my-4">
                <div class="col-auto">
                    <label style="cursor: pointer"><input type="checkbox" class="icheck_all" data-ele=".roll_icheck" @click="toggleSelection()"><span class="ml-2">{{ ts('SELECTALL') }}</span></label>
                    <span class="btn btn-primary ml-3" onclick="deleteAlliCheck('.roll_icheck', '/admin/distributor/deletes')">{{ ts('delete') }}</span>
                </div>
                <div class="col">
                    <el-pagination
                            @current-change="currentChange"
                            :current-page="currentPage"
                            :page-size="currentSize"
                            layout="total, prev, pager, next, jumper"
                            :total="total"
                    ></el-pagination>
                </div>

            </div>
            {{--<div class="row my-3">
                <div class="col-auto">
                    <label style="cursor: pointer"><input type="checkbox" class="icheck_all" data-ele=".roll_icheck"><span class="ml-2">{{ ts('SELECTALL') }}</span></label>
                    <span class="btn btn-primary ml-3" onclick="deleteAlliCheck('.roll_icheck', '/admin/distributor/deletes')">{{ ts('delete') }}</span>
                </div>
                <div class="col">
                    {{ $data->appends(request()->input())->links() }}
                </div>
            </div>--}}
        </div>


    </div>


@endsection

@section('script')
    <script src="/dist/vue.js"></script>
    {{--<script src="/dist/vue-i18n.js"></script>--}}
    {{--<script src="/dist/vue-i18n.esm.browser.min.js"></script>--}}
    <script src="/dist/element-ui.js"></script>
    {{--<script src="/dist/element-ui/locale/zh-CN.js"></script>
    <script src="/dist/element-ui/locale/zh-TW.js"></script>
    <script src="/dist/element-ui/locale/en.js"></script>--}}
    <script></script>
    <script>
        /*Vue.use(VueI18n);
        @if(session('language') == 1)
        Vue.locale('en', ELEMENT.lang.en)
        @elseif(session('language') == 1)
        Vue.locale('en', ELEMENT.lang.zhTW)
        @else
        Vue.locale('en', ELEMENT.lang.zhCN)
        @endif*/
        function viewUrl(id) {
            return location.pathname + id
        }
        function ddnUrl(id) {
            return '/admin/distributor/'+id+'/dealer'
        }
        function ddpnUrl(id) {
            return '/admin/distributor/'+id+'/performance'
        }
        function wHeight() {
            console.log(window.innerHeight)
            return window.innerHeight - 300 + 'px';
        }
        function getList(form) {
            return request.get('/admin/ajax/getList', {
                params: form
            })
        }
        function uESta(status) {
            if (status == 1) {
                return "{{ ts('deactive') }}"
            }
            return "{{ ts('active') }}"
        }
        function uSta(status) {
            if (status == 1) {
                return "{{ ts('active') }}"
            }
            return "{{ ts('active') }}"
        }
        var app = new Vue({
            el: '#vueRoot',
            data: {
                List: [],
                total: 0,
                Form: {
                    a: 'distributor'
                },
                currentPage: 1,
                currentSize: 15,
                Filter: {},
                loading: true,
            },
            mounted() {
                this.$nextTick(function() {
                    this.Initial();
                    $('#vueRoot').removeClass('d-none').show()
                });
            },
            methods: {
                toggleSelection() {
                    console.log('sfadsf')
                    this.$refs.multipleTable.toggleAllSelection();
                },
                handleSelectionChange(val) {
                    val;
                    window.console.log('handleSelectionChange', val)
                },
                doSearch() {
                    this.getList()
                },
                Initial() {
                    this.getList();
                },
                doFilter() {
                    window.console.log(this.Form);
                    this.getList();
                },
                getList() {
                    var that = this;
                    this.loading=true;
                    var form = Object.assign({}, this.Filter, this.Form, {
                        limit: that.currentSize,
                        page: that.currentPage,
                    });
                    getList(form)
                        .then(function(d) {
                            that.List = d.data;
                            that.total = d.total;
                            that.loading=false;
                        })
                        .catch(function(d) {
                            window.console.log(d);
                            that.loading=false;
                        });
                },
                doDelete(id) {
                    this.$confirm("此操作将永久删除该项内容, 是否继续？", "提示", {
                        confirmButtonText: "确定",
                        cancelButtonText: "取消",
                        type: "warning",
                    })
                        .then(() => {
                            Delete(id)
                                .then((d) => {
                                    d;
                                    this.$message.success("删除成功！");
                                    this.Initial();
                                })
                                .catch((d) => {
                                    window.console.log(d);
                                });
                        })
                        .catch((d) => {
                            d;
                        });
                },
                sizeChange(val) {
                    this.currentSize = val;
                    this.currentPage = 1;
                    this.getList();
                },
                currentChange: function(val) {
                    this.currentPage = val;
                    this.getList();
                },
                indexMethod(index) {
                    return (this.currentPage - 1) * this.currentSize + index + 1;
                },
            },
        })
        $(document).ready(function () {
            $('.table.bt-table').bootstrapTable({
                fixedColumns: true,
                fixedNumber: 1,
                fixedRightNumber: 1,
            }).removeClass('d-none')
        })
    </script>
@endsection